<template>
  <div>
    <el-row>
      <el-container>
        <el-header>用户管理</el-header>
      </el-container>
    </el-row>
    <div class="userTop">
      <el-input v-model="input" placeholder="请输入内容" style="width: 120px"></el-input>
      <el-input v-model="input" placeholder="请输入内容" style="width: 120px"></el-input>

      <el-button type="primary">查询</el-button>
      <el-button type="success">新增</el-button>
    </div>
    <div class="userMain">
      <el-table style="width: 100%" :data="tableData">
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="psw" label="密码"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              style="width：500px"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[5, 10]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import usersApi from "@/userapi/usersApi";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page: 0,

      currentPage1: 2,

      input: ""
    };
  },

  components: {},

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
    }
  },
  created() {
    usersApi.getuser(1, 5).then(res => {
      this.tableData = res.data.data;
      // console.log(res.data.total);
      this.total = res.data.total;
    });
  }
};
</script>

<style scoped>
.main {
  position: absolute;
  top: 50px;
  left: 230px;
  right: 0px;
  bottom: 0px;
  padding: 10px;
  overflow-y: auto;
}
.el-header,
.el-footer {
  background-color: #ccc;
  color: #333;
  width: 100%;
  /* text-align: center; */
  line-height: 60px;
  margin-bottom: 40px;
}
</style>